import 'echarts/extension/bmap/bmap'
import React from "react"
import { Row, Col, Divider, Carousel } from 'antd'
import './index.scss'
import HomeCard from './components/HomeCard'
import Center from '@/components/Center'
import logo4 from '@/assets/home/合理规划路线.svg'
import logo7 from '@/assets/home/上门取货送货服务.svg'
import logo2 from '@/assets/home/仓库存货.svg'
import logo5 from '@/assets/home/配送包裹.svg'
import logo8 from '@/assets/home/设置交货地点.svg'

import logo1 from '@/assets/home/安排送货时间.svg'
import logo3 from '@/assets/home/发货包裹.svg'
import logo6 from '@/assets/home/配送快递服务.svg'
import logo9 from '@/assets/home/仓库叉车.svg'

import Icon from '@/components/Icon'

const items = [
  {
    title: '智能送货时间安排',
    description: '利用AI优化送货时间，确保准时交付',
    icon: <Icon type={'icon-truck__easyic'} />
  },
  {
    title: '实时仓库存量管理',
    description: '智能系统监控库存，高效管理货物流转',
    icon: <Icon type={'icon-huoche1'} />
  },
  {
    title: '一键智能发货',
    description: '简化发货流程，快速响应订单需求',
    icon: <Icon type={'icon-truck__easyic'} />
  },
  {
    title: '智能路线规划系统',
    description: '采用算法优化配送路线，节省时间与成本',
    icon: <Icon type={'icon-truck__easyic'} />
  },
  {
    title: '高效配送服务',
    description: '确保每个包裹快速、安全地送达目的地',
    icon: <Icon type={'icon-huoche4'} />
  },
  {
    title: '快递服务的智能化',
    description: '提供迅速、准确的配送服务，满足即时需求',
    icon: <Icon type={'icon-a-qichehuochekache'} />
  },
  {
    title: '上门物流服务',
    description: '提供便捷的取送货服务，带来极致便利',
    icon: <Icon type={'icon-xiaohuoche'} />
  },
  {
    title: '灵活的交货点设置',
    description: '自定义交货地点，智能适配最优配送方案',
    icon: <Icon type={'icon-lahuoche'} />
  },
]

const carouselItem = items.map(item => {
  return (
    <div>
      {item.icon}
    </div>
  )
})



const Home = () => {
  return (
    <div className='home'>
      <Carousel  autoplay autoplaySpeed={3000}>
        <div className='carousel'>
          <Center>
            <img
              alt="example"
              src={logo1}
              className='img'
            />
          </Center>
        </div>
        <div className='carousel'>
          <Center>
            <img
              alt="example"
              src={logo3}
              className='img'
            />
          </Center>
        </div>
        <div className='carousel'>
          <Center>
            <img
              alt="example"
              src={logo9}
              className='img'
            />
          </Center>
        </div>
        <div className='carousel'>
          <Center>
            <img
              alt="example"
              src={logo6}
              className='img'
            />
          </Center>
        </div>
      </Carousel>
      <Divider className='divider' style={{
        color: '#eaff8f'
      }} />
      <Row gutter={32} className='row1' justify='space-evenly' align='middle'>
        <Col span={4} className="gutter-row">
          <Center>
            <HomeCard logo={logo4} item={items[3]} />
          </Center>
        </Col>
        <Col span={4} className="gutter-row">
          <Center>
            <HomeCard logo={logo7} item={items[6]} />
          </Center>
        </Col>
        <Col span={4} className="gutter-row">
          <Center>
            <HomeCard logo={logo5} item={items[4]} />
          </Center>
        </Col>
        <Col span={4} className="gutter-row">
          <Center>
            <HomeCard logo={logo2} item={items[1]} />
          </Center>
        </Col>
        <Col span={4} className="gutter-row">
          <Center>
            <HomeCard logo={logo8} item={items[7]} />
          </Center>
        </Col>
      </Row>
    </div>
  )
}

export default Home
